import {PageContainer} from '@ant-design/pro-layout';
import React, {useEffect, useState} from 'react';
import {Line} from '@ant-design/charts';
import {ProFormDateRangePicker, ProFormSelect, QueryFilter,} from '@ant-design/pro-form';
import ProCard, {StatisticCard} from "@ant-design/pro-card";
import RcResizeObserver from "rc-resize-observer";
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
import { Pie } from '@ant-design/charts';
import "./index.css"
import ProTable from '@ant-design/pro-table';

const UserStatistics: React.FC = () => {
	const [responsive, setResponsive] = useState(false);
	const [data, setData] = useState([])	// 定义图表状态
	const {Statistic} = StatisticCard; // 卡片组件解析

	// 调用Hook函数中  生命周期函数
	useEffect(() => {
		// 调用自定义api请求函数
		asyncFetch();
	}, []);
	// 卡片组件icon 图片大小
	const imgStyle = {
		display: 'block',
		height: 36,
		width: 36,
	};
	// 表格数据
	const columns = [
		{
			title: 'top省份',
			dataIndex: 'key',
			align:'center'
		},
		{
			title: '累计用户数',
			dataIndex: 'name',
			align:'center'

		},
		{
			title: '新增用户数',
			dataIndex: 'createdAt',
			align:'center'

		},
		{
			title: '访客数',
			dataIndex: 'createdAt',
			align:'center'

		},
		{
			title: '支付金额',
			dataIndex: 'createdAt',
			align:'center'

		},
	];
	// 饼图
	const data2 = [
		{
			type: 'nan',
			value: 27,
		},
		{
			type: '分类二',
			value: 25,
		},
		{
			type: '未知',
			value: 18,
		}
	];
	const config2 = {
		appendPadding: 10,
		data: data2,
		angleField: 'value',
		colorField: 'type',
		radius: 1,
		innerRadius: 0.6,
		label: {
			type: 'inner',
			offset: '-50%',
			content: '{value}',
			style: {
				textAlign: 'center',
				fontSize: 14,
			},
		},
		interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
		statistic: {
			title: false,
			content: {
				style: {
					whiteSpace: 'pre-wrap',
					overflow: 'hidden',
					textOverflow: 'ellipsis',
				},
				content: '总用户数 500',
			},
		},
	};
	// 地图数据
	const ProvinceData = [
		{
			name: '云南省',
			code: 530000,
			value: 17881.12
		},
		{
			name: '黑龙江省',
			code: 230000,
			value: 16361.62
		},
		{
			name: '贵州省',
			code: 520000,
			value: 14806.45
		},
		{
			name: '北京市',
			code: 110000,
			value: 30319.98
		},
		{
			name: '河北省',
			code: 130000,
			value: 36010.27
		},
		{
			name: '山西省',
			code: 140000,
			value: 16818.11
		},
		{
			name: '吉林省',
			code: 220000,
			value: 15074
		},
		{
			name: '宁夏回族自治区',
			code: 640000,
			value: 3705.18
		},
		{
			name: '辽宁省',
			code: 210000,
			value: 25315.35
		},
		{
			name: '海南省',
			code: 460000,
			value: 4832.05
		},
		{
			name: '内蒙古自治区',
			code: 150000,
			value: 17289.22
		},
		{
			name: '天津市',
			code: 120000,
			value: 18809.64
		},
		{
			name: '新疆维吾尔自治区',
			code: 650000,
			value: 12199.08
		},
		{
			name: '上海市',
			code: 310000,
			value: 32679.87
		},
		{
			name: '陕西省',
			code: 610000,
			value: 24438.32
		},
		{
			name: '甘肃省',
			code: 620000,
			value: 8246.07
		},
		{
			name: '安徽省',
			code: 340000,
			value: 30006.82
		},
		{
			name: '香港特别行政区',
			code: 810000,
			value: 0
		},
		{
			name: '广东省',
			code: 440000,
			value: 97277.77
		},
		{
			name: '河南省',
			code: 410000,
			value: 48055.86
		},
		{
			name: '湖南省',
			code: 430000,
			value: 36425.78
		},
		{
			name: '江西省',
			code: 360000,
			value: 21984.78
		},
		{
			name: '四川省',
			code: 510000,
			value: 40678.13
		},
		{
			name: '广西壮族自治区',
			code: 450000,
			value: 20353.51
		},
		{
			name: '江苏省',
			code: 320000,
			value: 92595.4
		},
		{
			name: '澳门特别行政区',
			code: 820000,
			value: null
		},
		{
			name: '浙江省',
			code: 330000,
			value: 56197.15
		},
		{
			name: '山东省',
			code: 370000,
			value: 76469.67
		},
		{
			name: '青海省',
			code: 630000,
			value: 2865.23
		},
		{
			name: '重庆市',
			code: 500000,
			value: 20363.19
		},
		{
			name: '福建省',
			code: 350000,
			value: 35804.04
		},
		{
			name: '湖北省',
			code: 420000,
			value: 39366.55
		},
		{
			name: '西藏自治区',
			code: 540000,
			value: 1477.63
		},
		{
			name: '台湾省',
			code: 710000,
			value: null
		}
	];
	const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
	useEffect(()=>{
		const scene = new Scene({
			id: 'map',
			logoVisible: false,
			map: new Mapbox({
				center: [ 116.2825, 39.9 ],
				pitch: 0,
				style: 'blank',
				zoom: 2,
				minZoom: 1,
				maxZoom: 5
			})
		});
		scene.setMapStatus({
			dragEnable: true,
			doubleClickZoom:true
		})
		scene.on('loaded', () => {
			new CountryLayer(scene, {
				data: ProvinceData,
				joinBy: [ 'NAME_CHN', 'name' ],// 数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接 对照表 Array [string, string] 第一个值为空间数据字段，第二个为传入数据字段名
				depth: 1,
				provinceStroke: '#fff',
				cityStroke: '#EBCCB4',
				cityStrokeWidth: 2,
				fill: {   // 填充图样式
					color: {
						field: 'NAME_CHN', // field 填充映射字段
						values: colors
					}
				},
				popup: {
					enable: true,
					Html: props => {
						return `<span> 123</span>`;
					}
				}
			});
		});
	},[])

	// 图表定义请求api 函数
	const asyncFetch = () => {
		fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
			.then((response) => response.json())
			.then((json) => setData(json))
			.catch((error) => {
				console.log('fetch data failed', error);
			});
	};
	// 定义图表配置   及 折线图的显示
	const config = {
		data: data,       // 数据
		xField: 'year',    // 定义  x  轴底部数值
		yField: 'value',   //  定义  y 轴  是他的值
		seriesField: 'category',  // 此属性是多曲线的关键 , 如果数值有多种  就会出现多曲线
		//  tooltip  自定义出没到曲线后的样式  不配就是默认显示

		// 此属性为设置与轴的样式
		yAxis: {
			line: {style: {strike: '#ccc'}}, //
			// 配置 y 轴文字样式
			label: {
				// 对 y 轴文字进行处理
				formatter: function formatter(v: string) {
					return ''.concat(v).replace(/\d{1,3}(?=(\d{3})+$)/g, function (s) {
						return ''.concat(s, ',');
					});
				},
			},
		},
		color: ['#1979C9', '#D62A0D', '#FAA219'],
		xAxis: {
			legend: {
				position: 'top-right'
			}
		},
	};
	return (
		<PageContainer>
			<ProCard>
				<QueryFilter<{
					name: string;
					company: string;
				}>
					onFinish={async (values) => {
						console.log(values.name);
					}}
				>
					<ProFormSelect
						name="User"
						label="用户渠道"
						showSearch
						valueEnum={{
							all: '全部',
							official: '公众号',
							Applet: '小程序',
							h5: 'H5',
							Pc: 'PC'
						}}
					/>
					<ProFormDateRangePicker name="create" label="选择时间" colSize={1}/>
				</QueryFilter>
			</ProCard>

			<ProCard style={{marginTop: 8}} title="用户概况"
					 tooltip="这是提示">
				<RcResizeObserver
					key="resize-observer"
					onResize={(offset) => {
						setResponsive(offset.width < 400);
					}}
				>
					<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>访客数</h3>),
							value: 4567,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/fks.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>浏览量</h3>),
							value: 4567,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/lll.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>新增用户数</h3>),
							value: 551452,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/xzyh.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>成交用户数</h3>),
							value: 551452,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/cjyh.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>访客-支付转化率</h3>),

							value: 56252,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/fkzhl.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>付费会员</h3>),

							value: 56252,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/ffhy.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
					</StatisticCard.Group>

					<StatisticCard.Group direction={responsive ? 'column' : 'row'}>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>充值用户</h3>),
							value: 2000000,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/czs.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>客单价</h3>),

							value: 50000,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/kdj.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>累计用户</h3>),

							value: 4545156,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/ljyh.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>累计付费会员数</h3>),

							value: 0,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/ffhys.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="-8.04%" trend="down"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>累计充值用户数</h3>),

							value: 4545156,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/ljcjyhs.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
						<StatisticCard statistic={{
							valueStyle: {fontSize: '28px',  marginTop: '-10px'},
							title: (<h3>累计成交用户数</h3>),
							value: 4545156,
							icon: (
								<img
									style={imgStyle}
									src={require("/public/userImg/ljcjyhs.png")}
									alt="icon"
								/>
							),
							description: <Statistic title={<h4>环比增长</h4>} value="8.04%" trend="up"/>,
						}}/>
					</StatisticCard.Group>
				</RcResizeObserver>
				<Line {...config} />
			</ProCard>
			<div style={{display:'flex',justifyContent:'space-between'}}>
				<ProCard   title="用户地域分布" className="region">
					<div id='map' style={{width:'40%',height:'auto',position:'relative'}} />
					<div style={{width:'60%', height:'auto',position:'relative',left:'39%'}}>
						<ProTable
							columns={columns}

							// scroll={{x: 600}}
							request={async (params) => {
								console.log(params);
								return {
									data: [
										{
											key: '中古',
											name: `TradeCode `,
											createdAt: 56,
										},
										{
											key: 1,
											name: `TradeCode `,
											createdAt: 43,
										},
										{
											key: 1,
											name: `TradeCode ${1}`,
											createdAt: 34,
										},
										{
											key: 1,
											name: `TradeCode ${1}`,
											createdAt: 45,
										},
									],
									success: true,
								};
							}}
							search={false}
							rowKey="key"
							options={false}
							pagination={false}
						/>
					</div>
				</ProCard>
				<ProCard   title="用户性别比例" className="Pie_chart">
					<Pie {...config2 }/>
				</ProCard>
			</div>
		</PageContainer>
	);
};

export default UserStatistics;

